<template>
  <!-- 自定义下拉框 -->
  <div
    class="zl-select-box"
    :class="disabled ? 'zl-select-box-disabled' : ''"
    @mouseover="mouseoverBox"
    @mouseleave="showSelectBox = false"
  >
    <div class="flex-wrap flex-justify-between" style="height:100%">
      <div
        style="margin-right:10px"
        class="selected-title text-ess-1"
        v-if="checked[lable]"
      >
        {{ checked[lable] }}
      </div>
      <div
        v-else
        style="margin-right:10px "
        class="selected-placeholder text-ess-1"
      >
        {{ placeholder }}
      </div>
      <div>
        <i
          class="el-icon-arrow-up zl-select-icon"
          :class="{ 'el-icon-arrow-down': !showSelectBox }"
        ></i>
      </div>
    </div>
    <div class="zl-select-content" v-if="showSelectBox">
      <div class="zl-select-main">
        <div
          v-for="(item, index) in selectList"
          :key="index"
          class="zl-select-item"
          :class="{ 'zl-select-item-ac': item[id] === checked[id] }"
          @click="change(item)"
        >
          <div style="width:100%" class="text-ess-1">{{ item[lable] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  neme: 'zlSelect',
  props: {
    checked: {
      type: Object,
      default: () => {}
    },
    selectList: {
      type: Array,
      default: () => []
    },
    lable: {
      type: String,
      default: 'profession_name'
    },
    id: {
      type: String,
      default: 'id'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showSelectBox: false
    }
  },
  methods: {
    change(item) {
      if (item[this.id] === this.checked[this.id]) {
        return
      }
      this.$emit('change', item)
    },
    mouseoverBox() {
      this.showSelectBox = !this.disabled
    }
  }
}
</script>
<style scoped>
.zl-select-box {
  position: relative;
  padding: 0 14px;
  width: 144px;
  height: 36px;
  line-height: 34px;
  font-size: 16px;
  font-weight: 400;
  color: #383838;
  border-radius: 8px;
  border: 1px solid #f0f1f2;
  cursor: pointer;
}

.zl-select-box-disabled {
  cursor: default;
}

.selected-title {
  font-size: 16px;
  font-weight: 400;
  color: #383838;
}
.zl-select-icon {
  line-height: 34px;
  font-size: 16px;
  font-weight: 400;
  color: #666666;
}
.zl-select-content {
  position: absolute;
  left: 0;
  top: 36px;
  width: 100%;
  margin-top: -1px;
  padding-top: 10px;
  z-index: 99;
}
.zl-select-main {
  padding: 10px 0;
  width: 100%;
  max-height: 344px;
  overflow-y: auto;
  background: #ffffff;

  box-shadow: 0px 2px 10px 0px rgba(205, 205, 205, 0.5);
  border-radius: 8px;
}
.zl-select-main::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
}

/* 滚动槽 */
.zl-select-main::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 3px;
}

/* 滚动条滑块 */
.zl-select-main::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #d9d9d9;
  box-shadow: none;
}
.zl-select-item {
  width: 100%;
  line-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.zl-select-item:hover {
  color: #383838;
  background: #f7f7f7;
}
.zl-select-item-ac {
  color: #383838;
  background: #f7f7f7;
}
.selected-placeholder {
  font-size: 14px;
  line-height: 34px;
  font-weight: 400;
  color: #999999;
}
</style>
